import React, { useContext } from "react";
import styles from "./Robot.module.css";
import { appContext, appSetStateContext } from "../AppState"; // 引入上下文对象
import { useAddToCart } from "./AddToCart";

// 定义要传进来的数据
interface RobotProps {
  id: number;
  name: string;
  email: string;
}

// FC  = functional component 函数式组件的缩写
//type React.FC<p = {}> = React.FuntionComponent<P> 泛型参数p = props
const Robot: React.FC<RobotProps> = ({ id, email, name }) => {
  // return (
  //   <appContext.Consumer>
  //     {/* 消费者监听值 */}
  //     {(value) => {
  //       return (
  //         <div className={styles.cardContainer}>
  //           <img src={`https://robohash.org/${id}`} alt="robot" />
  //           <h2>{name}</h2>
  //           <p>{email}</p>
  //           <p>作者:{value.username}</p>
  //         </div>
  //       );
  //     }}
  //   </appContext.Consumer>
  // );
  // 使用useContext可以减少代码量
  const value = useContext(appContext);
  //!使用自定义hook
  const addToCart = useAddToCart();
  return (
    <div className={styles.cardContainer}>
      <img src={`https://robohash.org/${id}`} alt="robot" />
      <h2>打折商品</h2>
      <h2>{name}</h2>
      <p>{email}</p>
      <p>作者:{value.username}</p>
      <button
        onClick={() => {
          addToCart(id, name);
        }}
      >
        加入购物车
      </button>
    </div>
  );
};

export default Robot;
